<script setup>
import { useScrollData } from '@/sheep/hooks/useSrcollData';
import SpuApi from '@/sheep/api/product/spu';
import { reactive, computed, ref, watch } from 'vue';
import sheep from '@/sheep';

import HotItem from '@/sheep/businessCom/hot-item.vue';
import scrollList from '@/sheep/businessCom/scrollList.vue';

const props = defineProps({
  getApi: {
    type: String,
    default:'getSpuPage'
  },
  params: {
    type: Object,
    default(){
      return {}
    }
  },
  col: {
    type: Number,
    default:2
  },
  tpName:{
    type:String,
  }
});
const { getApi ,params,col,tpName} = props
const state = reactive({
  getApi,
  params
})
const { data:scrollData, loadMore,init } = useScrollData({
  getApi: SpuApi[getApi],
  params:state.params
});

watch(params,function(value){
  Object.assign(state.params,value)
  initScrollData()
},{
  immediate: true,
  deep:true
})

function initScrollData() {
  init({
    params:state.params,
  },true)
  loadMore()
}

</script>

<template>
  <scrollList :col="col" @loadMore="loadMore" :data="scrollData" :tpName="tpName">
    <template #default="{item ,index}">
      <!-- 外部传入了默认插槽 -->
      <slot  v-if="$slots.default" name="default" :index="index"  :item="item"   ></slot>
      <!-- 外部没有传入默认插槽 -->
      <template v-else>
        <HotItem :model-value="item" @click="sheep.$router.go('/pages/goods/index', { id: item.id })"></HotItem>
      </template>

    </template>
  </scrollList>
</template>

<style scoped lang="scss">

</style>